<template>
	<div :ref="editorId" class="editor"></div>
</template>

<script>
	import E from 'wangeditor'
	import Cookies from 'js-cookie'
	import { getToken } from '@/utils/auth'
	export default {
		name: 'Editor',
		props: {
			subject: [Number, String],
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: ''
			},
			menus: Array
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				editorId: '',
				editor: {}
			}
		},
		watch: {
			value(val) {
				if (val !== this.editor.txt.html()) {
					this.editor.txt.html(this.value)
				}
			}
		},
		mounted() {
			this.editorId = this.randomString(12)
			this.$nextTick(() => {
				this.editor = new E(this.$refs[this.editorId])
				this.editor.config.showFullScreen = false
				this.editor.config.zIndex = 20
				this.editor.config.contenteditable = !this.disabled
				this.editor.config.uploadImgShowBase64 = true

				this.editor.config.menus = [
					'head',
					'bold',
					'fontSize',
					'fontName',
					'italic',
					'underline',
					'indent',
					'foreColor',
					'backColor',
					'justify',
					'table',
					'image',
					'undo',
					'redo'
				]
				// // 上传图片的接口地址,'image'
				this.editor.config.uploadImgServer =
					window.config.getAuthUrl().baseUrl + '/admin/upload/image'
				this.editor.config.uploadFileName = 'file' // formdata中的name属性
				this.editor.config.debug = true // 开启debug模式
				this.editor.config.showLinkImg = false

				//添加图片header
				this.editor.config.uploadImgHeaders = {
					authorization: 'Bearer ' + getToken() // 设置请求头
				}
				// 限制图片大小（3M）
				this.editor.config.uploadImgMaxSize = 400 * 1024 //图片大小限制400k
				this.editor.config.minHeight = '100px'
				// 配置菜单功能
				this.menus && (this.editor.config.menus = this.menus)
				// 输入内容的回调
				this.editor.config.pasteFilterStyle = false
				this.editor.config.onchange = html => {
					let content = html
					if (html === '<p><br></p>') {
						content = ''
					}
					this.$emit('input', content)
					this.$emit('change', content)
				}
				// 输入完成失去焦点的回调
				this.editor.config.onblur = html => {
					let content = html
					if (html === '<p><br></p>') {
						content = ''
					}
					this.$emit('input', content)
					this.$emit('blur', content)
				}

				//上传图片的回调
				this.editor.config.uploadImgHooks = {
					// 插入图片失败回调
					fail: (xhr, editor, result) => {
						console.log(result)
					},
					// 图片上传成功回调
					success: (xhr, editor, result) => {
						console.log(xhr)
					},
					// 网络超时的回调
					timeout: (xhr, editor) => {
						console.log(xhr, editor)
					},
					// 图片上传错误的回调
					error: (xhr, editor) => {
						console.log(xhr, editor)
					},
					customInsert: (insertImg, result, editor) => {
						if (result.status === 0) {
							this.$message.error(result.msg)
							return
						}
						// 图片上传成功，插入图片的回调 nsertImg()为插入图片的函数
						//循环插入图片
						let url = result.data.uri
						var img = new Image()
						img.src = url
						img.onload = function () {
							var width = img.width / 2 + 'px'
							var height = img.height / 2 + 'px'
							insertImg(url, width, height)
						}
					}
				}
				// 创建编辑器
				this.editor.create()
				this.editor.txt.html(this.value)
			})
		},
		methods: {
			// 生成随机字符串id
			randomString(len) {
				len = len || 32
				let $chars =
					'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				let maxPos = $chars.length
				let pwd = ''
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
				}
				return 'a' + pwd
			}
		}
	}
</script>
<style>
	.w-e-text-container {
		z-index: auto !important;
	}
	.w-e-text-container .w-e-panel-container {
		z-index: 21;
	}
	u {
		text-decoration-skip-ink: none;
	}
</style>
<style lang="scss" scoped>
	.editor {
		::v-deep {
			.w-e-text {
				overflow-y: auto;
				padding: 5px;
				p {
					margin: 0;
				}
			}
		}
	}
</style>
